<template>
  <div>
    <head-top></head-top>
    <template>
      <div style="width: 90%; border-radius: 10px;margin-left: 60px" >
        <el-row style="margin-top: 20px;">
          <el-form :model="addGoodsForm" label-width="110px" class="demo-formData">
             <el-form-item label="商品品牌">
             <el-select v-model="addGoodsForm.goodsKind">
               <el-option v-for="item in options"
                          :label="item.text"
                          :key="item.value"
                          :value="item.value+' '+item.text"
               ></el-option>
             </el-select>
           </el-form-item>
             <el-form-item label="商品名称">
               <el-input v-model="addGoodsForm.goodsName" style="width: 200px" placeholder="请输入商品名称"/>
             </el-form-item>
            <el-form-item label="商品价格">
              <el-input v-model="addGoodsForm.goodsPrice" style="width: 200px" placeholder="请输入商品价格"/>
            </el-form-item>
            <el-form-item label="上传商品图片">
              <el-upload
                class="upload-demo"
                drag
                v-model="addGoodsForm.goodsImage1"
                multiple>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
              </el-upload>
            </el-form-item>
            <el-form-item label="上传局部图片">
              <el-upload
                class="upload-demo"
                drag
                v-model="addGoodsForm.goodsImage2"
                multiple>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
              </el-upload>
              <el-upload
                class="upload-demo"
                drag
                v-model="addGoodsForm.goodsImage3"
                multiple>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
              </el-upload>
            </el-form-item>
          </el-form>
        </el-row>
        <el-button @click="edit()" type="primary">立即创建</el-button>
      </div>
    </template>
    <el-table
      :columns="columns"
      :data="tableList"
      v-loading="loading"
      element-loading-text="小猪猪正在玩命加载中，请稍候哦。。。"
      highlight-current-row
      v-model="tableList">
      <el-table-column v-for="(column, index) in columns" :key="index" :label="column.text" :width="column.width">
        <template slot-scope="scope">
          <template v-if="column.useSlot">
            <template v-if="column.value === 'operate'">
              <el-button @click="del(scope, scope.row)" type="text">删除</el-button>
              <el-button
                type="text"
                @click="test(scope.$index, scope.row)">编辑
              </el-button>
            </template>
          </template>
          <template v-else>
            {{ scope.row[column.value] }}
          </template>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-if="total && total > 0"
      :current-page="currentPage"
      :page-sizes="[2, 4, 6, 8]"
      :page-size="pageSize"
      :total="total"
      layout="slot, jumper, sizes, next, pager, prev"
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange">
      <slot>
            <span>
              共{{ pageCount }}页 当前为第{{ currentPage }}页
            </span>
      </slot>
    </el-pagination>
  </div>
</template>

<script>
import headTop from '../components/head-top'
const initForm = {
  goodsKind: '',
  goodsName: '',
  goodsPrice: '',
  goodsImage1: '',
  goodsImage2: '',
  goodsImage3: '',
  goodsImage4: '',
  goodsImage5: ''
}
export default {
  name: 'add-goods',
  components: { headTop },
  data () {
    return {
      dialogVisible: false,
      total: 100,
      pageCount: 10,
      pageSize: 8,
      loading: true,
      currentPage: 1,
      addGoodsForm: Object.assign({}, initForm),
      goodsDataList: [],
      options:[
        {value:1,text:"华为"},
        {value:2,text:"小米"},
        {value:3,text:"OPPO"},
        {value:4,text:"坚果"}
      ],
      columns: [
        {
          text: '商品种类',
          value: 'goodsKind',
          width: 150
        },
        {
          text: '商品名称',
          value: 'goodsName',
          width: 150
        },
        {
          text: '商品价格',
          value: 'goodsPrice',
          width: 350
        },
        {
          text: '图片',
          value: 'goodsImage1',
          width: 170,
          useSlot: true
        },{
          text: '图片',
          value: 'goodsImage2',
          width: 170,
          useSlot: true
        },{
          text: '图片',
          value: 'goodsImage3',
          width: 170,
          useSlot: true
        },
        {
          text: '操作',
          value: 'operate',
          width: 180,
          fixed: 'right',
          useSlot: true
        }
      ]
    }
  },
  computed: {
    tableList() {
      return this.goodsDataList.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
    }
  },
  created(){
    var url = this.HOME + '/findallgoods';
    this.$axios.get(url)
      .then(res => {
      console.log(res.data.list);
    this.goodsDataList = res.data.list;
    this.loading = false;
  }).catch(error => {
      console.log(error);
  });
  },
  methods: {
    // 切换每页显示条数
    handleSizeChange(val) {
      this.currentPage = 1
      this.pageSize = val
    },
    // 当前页改变
    handleCurrentChange(val) {
      this.currentPage = val
    },
    edit() {
      var url = this.HOME + '/addgoods';
      let data = {'goodsKind': this.addGoodsForm.goodsKind, 'goodsName': this.addGoodsForm.goodsName, 'goodsPrice': this.addGoodsForm.goodsPrice}
      this.$axios.post(url, data).then((res) => {
        console.log(res);
      if (res.data.judge == true) {
        this.goodsKind = ''
        this.goodsName = ''
        this.goodsPrice = ''
        /*this.goodsImage1 = ''
        this.goodsImage2 = ''
        this.goodsImage3 = '''goodsImage1': this.addGoodsForm.goodsImage1,'goodsImage2': this.addGoodsForm.goodsImage2,'goodsImage3': this.addGoodsForm.goodsImage3}
      ;*/
        this.$message.success('商品添加已完成')
      } else {
        console.log('error submit')
      }
    })
    }
  }
}
</script>

<style lang="less">
  @import '../../style/mixin';
  .button_submit{
    text-align: center;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #20a0ff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }
  .avatar {
    width: 120px;
    height: 120px;
    display: block;
  }
  .el-table .info-row {
    background: #c9e5f5;
  }

  .el-table .positive-row {
    background: #e2f0e4;
  }
</style>
